<template>

	<div class="dispose">
    	<div class="item" v-for="n in arr"> 
			<img v-bind:src="n.image" v-lazy="n.image">
			<div class="group">
				<p>{{n.title}}</p>
				<span>浏览量：{{n.views}}</span>
			</div>
		</div>
			
		<div class="more">
			还剩下27篇
		</div>     

    </div>
</template>

<script>
export default {
    data () {
        return {
             arr: []
        }
    },
    mounted(){
		fetch("./static/dispose.json").then(function(res){
			return res.json();
		})
		.then((res)=>{
			this.arr = res.data.data;
			
		})
	}

 }
</script>

<style>
.item{
	width: 100%;
	height: 4.3rem;
	position: relative;
}
.item .imgs{
	width: 100%;
	height: 3.5rem;
}
.item .myvideo{
	width: 1rem;
	height: 1rem;
	position: absolute;
	top: 30%;
	left: 45%;
}
.group{
	width: 100%;
	height: 0.8rem;
	display: flex;
	justify-content: space-between;
	line-height: 0.8rem;
	padding: 0 .1rem;
	font-size: .25rem;
}
.group p{
	width: 50%;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333;	
}
.group span{
	display: inline-block;
	font-size: .22rem;
	color: #999;
}
.more{
	width: 6rem;
	height: .6rem;
	color: #666;
	background-color: #ddd;
	font-size: .3rem;
	line-height: .6rem;
	text-align: center;
	margin: .2rem auto;
	border-radius:25px;
}
</style>